/**
 * Notes
 */

require("../../../../../both/base.js")
import './PersonalNotes.scss';

import PersonalAbstractSection from '../PersonalAbstractSection.jsx';

class PersonalNotes extends PersonalAbstractSection {
    constructor(props) {
        super(props);

        this.state = {
        }
    }

    /**
     * Section Element
     * @returns {XML}
     */
    createSectionElement() {

        const covers = [
            "http://img.mukewang.com/563aff620001ec7600900090.jpg",
            "http://img.mukewang.com/563b0af800018db300900090.jpg",
            "http://img.mukewang.com/563affe40001680c00900090.jpg",
            "http://img.mukewang.com/563aff7e0001c8c700900090.jpg",
            "http://img.mukewang.com/563aff2000019d0700900090.jpg"
        ]
        const majors = ["Web","Android","IOS","UI","嵌入式"]

        var lists = this.props.notes
        lists = lists.filter((e,i) => {
            return typeof e.Course !== "undefined" && e.Course !== null
        })
        lists = lists.map((e,i) => {
            var coverIdx = majors.indexOf(e.Course.major)
            return <li key={i}>
                <a href={`/user_video/${e.Course.id}`}>
                    <img className="cover" src={covers[coverIdx]} />
                    <div className="title">
                        {e.Course.title}
                    </div>
                    <div className="content">
                        {e.text}
                    </div>
                    <div className="time">
                        {e.createdAt.substr(0,10)}
                    </div>
                </a>
            </li>
        })

        // Need definition
        return(<div className="personal_notes_cr bln">
            {
                this.props.notes.length === 0 && <div className="no_data_wr">
                    <div className="no_data">
                        当前没有做过任何笔记，可以去<a href="/">首页</a>看看
                    </div>
                </div>
            }
            {
                this.props.notes.length !== 0 && <ul className="notes_wr">
                    {lists}
                </ul>
            }
        </div>)
    }
}

export default PersonalNotes;

